<template>
    <ul class="wioc-list-block">
        <li :key="'d'+index" v-for="(item,index) in  datalist">
            <wioc-icon-svg :name="'icon-'+item.icon"></wioc-icon-svg>
            <div :class="item.score? 'attr':''">
               <h3>{{item.name}}</h3>
               <span><strong>{{item.value}}</strong>{{item.unit}}</span>
            </div>
            <div v-if="item.score">
               <h4>
                   <strong :class="item.status>0?(item.status==0?'flat':'up'):'down'">{{item.status>=0?'+':'-'}}{{item.score}}</strong>
                   <span>分</span>
               </h4>
            </div>
    
        </li>
    </ul>
</template>


<script>
    export default {
        name:"wioc-list-block",
        components:{

        },
        data(){
            return{
				
            }
        },
        props:{
            datalist:Array,
        },
		methods:{
			
			
		}
    }

</script>

<style lang="less" scoped>
.wioc-list-block{
        display: flex;
        justify-content: space-between;
        li{
            width: 31%;
            border-radius: 0.2rem;
            background: #fff;
            box-sizing: border-box;
            box-shadow: 0 0 0.12rem #e9e6e6;
            padding: 0.15rem 0.1rem;
            .icon-svg{
                display: block;
            }
            div{
               h3{
                   font-size:0.11rem;
                   line-height: 0.32rem;
                   color:#595959;
                   font-weight: normal;
                   letter-spacing:-0.05px;
               }
               span{
                   font-size: 0.11rem;
                   line-height: 0.22rem;
                   letter-spacing:-0.05px;
                   color:#595959;
                   strong{
                       font-size: 0.16rem;
                       font-weight: normal;
                   }
               }
               &.attr{
                   display: flex;
                   justify-content: space-between;
               }
               &:last-child{
                   line-height: 0.26rem;
                   h4{
                     text-align: right;
                     font-size: 0.18rem;
                     font-weight: bold;
                     letter-spacing:-0.05px;
                   }
                   strong{
                       &.up{
                          color:#4ba0f3;
                       }
                       &.down{
                          color:#f66464;
                       }
                       &.flat{
                          color:#595959;
                       }
                   }
                    span{
                       font-size: 0.11rem;
                       line-height: 0.24rem;
                       letter-spacing:-0.05px;
                       color:#595959;
                       font-weight: normal;
                    }
               }
            }

        }
    }


</style>
